<ion-header>
  <ion-toolbar color="primary">
    <ion-img class="header-image" slot="start" src="assets/favicon/android-chrome-512x512.png"></ion-img>
    <ion-title>
      IdleLands
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <ion-row>
    <ion-col>
      <h3 class="text-center">Welcome to IdleLands!</h3>
      <p class="text-center">It's an idling game like you've never seen. Or maybe you have, if you've been here before.</p>
    </ion-col>
  </ion-row>

  <ion-row>
    <ion-col size-xs="12" offset-xs="0" size-md="6" offset-md="3" class="ion-padding">

      <ion-card *ngIf="hasError">
        <ion-card-content class="error-card">
          <ion-icon name="alert" color="danger"></ion-icon> It looks like the server is down. You'll be automatically connected, if possible, but you can always manually refresh. 
          
          <ion-button expand="block" (click)="refresh()" color="primary" fill="outline" class="ion-margin-top">Refresh</ion-button>
        </ion-card-content>
      </ion-card>

      <ion-card *ngIf="!hasError && loading && !needsSignUp">
        <ion-card-content class="true-center check-card">
          <ion-spinner></ion-spinner> Checking to see if you have a character...
        </ion-card-content>
      </ion-card>

      <ion-card *ngIf="!hasError && needsSignUp && !player">
        <ion-card-header>
          <ion-card-title>Create New Character</ion-card-title>
        </ion-card-header>

        <ion-card-content>
          <ion-row>
            <ion-col>
              <p class="ion-text-muted">Looks like you don't have a character. All you need is a name...</p>
            </ion-col>
          </ion-row>

          <ion-row>
            <ion-col>
              <ion-item>
                <ion-label position="stacked">Character Name</ion-label>
                <ion-input [(ngModel)]="charName" placeholder="Character Name" minlength="2" maxlength="20" (keyup.enter)="signUp()"></ion-input>
              </ion-item>
            </ion-col>
            <ion-col size-sm="3" size-xs="12">
              <p>&nbsp;</p>
              <ion-button expand="block" color="secondary" (click)="randomName()">Random</ion-button>
            </ion-col>
          </ion-row>

          <ion-row class="ion-margin-top">
            <ion-col size-xs="12" offset-xs="0" size-md="6" offset-md="3">
              <ion-button expand="block" color="primary" [disabled]="!canSignUp" (click)="signUp()">Register</ion-button>
            </ion-col>
          </ion-row>

          <ion-row class="ion-margin-top">
            <ion-col size-xs="12" offset-xs="0" size-md="6" offset-md="3" class="ion-text-center">
              ... or sign in to an existing character with:
            </ion-col>
          </ion-row>

          <ion-row class="ion-margin-top ion-flex-wrap">
            <ion-col *ngFor="let auth of authService.authMethods" size-xs="12" size-sm="3" size-md="3">
              <ion-button color="primary" size="small" expand="block" (click)="login(auth.provider)">
                <ion-icon slot="start" [name]="auth.icon"></ion-icon> {{ auth.name }}
              </ion-button>
            </ion-col>
          </ion-row>
        </ion-card-content>
      </ion-card>

      <ion-card *ngIf="!hasError && player">
        <ion-card-header>
          <ion-card-title>Welcome {{ isNewPlayer ? 'to IdleLands' : 'back' }}, {{ player.name }}!</ion-card-title>
        </ion-card-header>

        <ion-card-content class="player-card">
          You are a level {{ player.level.__current }}/{{ player.level.maximum }} {{ player.profession }}. {{ isNewPlayer ? 'Your adventure will begin in' : 'You were last seen traveling around' }} {{ player.map }}.

          <ion-button class="ion-margin-top" expand="block" color="primary" (click)="play()">Play IdleLands!</ion-button>
        </ion-card-content>
      </ion-card>

    </ion-col>
  </ion-row>
</ion-content>
